<template>
  <div>
    <el-form 
      :model="ruleForm"
      ref="baseRef"
      :label-width="'100px'"
      class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <el-form-item
              label="员工姓名:"
              prop="realName"
              :rules="[{ required: true,  message: '请输入员工姓名', trigger: 'change' } ]">
            <el-input maxlength="10" show-word-limit v-model="ruleForm.realName" placeholder="请输入员工姓名"/>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
              label="联系电话:"
              prop="phone"
              :rules="[
                { required: true, message: '请填写联系电话', trigger: 'change' },
                { min: 1, max: 11, message: '电话长度为11个字符', trigger: 'blur' },
                { pattern: /^1[3456789]\d{9}$/, message: '手机号码不合法，请重新输入' }
              ]">
            <el-input 
              maxlength="11"
              v-model="ruleForm.phone" 
              placeholder="请输入联系电话"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item 
            label="身份证:" 
            prop="idCard"
            :rules="[
              {  required: false, message: '请输入身份证号码',  trigger: 'change'  },
              { pattern: /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/, message: '身份证不合法，请重新输入' }
            ]">
            <el-input 
              maxlength="18"
              @blur="handleBlur" 
              v-model="ruleForm.idCard" 
              placeholder="请输入身份证号码"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item 
            label="入职公司:" 
            prop="entryCompany"
            :rules="[ {  required: false, message: '请选择入职公司',  trigger: 'change'  } ]">
            <el-select 
              filterable 
              v-model="ruleForm.entryCompany" 
              placeholder="请选择入职公司" 
              style="width: 100%">
              <el-option 
                v-for="item in companyOptions" 
                :key="item.id"
                :label="item.companyName" 
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item 
            label="入职状态:"
            prop="staffState"
            :rules="[ { required: true, message: '请选择入职公司',  trigger: 'change' } ]">
            <el-select style="width: 100%" v-model="ruleForm.staffState" placeholder="入职状态">
              <el-option label="正式" value="NORMAL"></el-option>
              <el-option label="试用" value="TRY"></el-option>
              <el-option label="兼职" value="LEAVE"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item 
            label="性别:" 
            prop="sex"
            :rules="[ { required: true, message: '请选择性别',  trigger: 'change' } ]">
            <el-select style="width: 100%" v-model="ruleForm.sex" placeholder="性别">
              <el-option label="男" value="MALE"></el-option>
              <el-option label="女" value="FEMALE"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item 
            label="入职时间:" 
            prop="entryTime"
            :rules="[ { required: true, message: '请选择入职时间',  trigger: 'change' } ]">
            <el-date-picker
              style="width: 100%"
              class="date"
              v-model="ruleForm.entryTime"
              type="date"
              placeholder="选择开始日期"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item 
            label="合同期限:" 
            prop="expireTime"
            :rules="[ {  required: true, message: '请选择合同期限',  trigger: 'change'  } ]">
            <el-date-picker
              class="date"
              style="width: 100%"
              v-model="ruleForm.expireTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择合同期限"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="住宿地址:"
            prop="stayAddress"
            :rules="[ {  required: true, message: '请选择住宿地址',  trigger: 'change'  } ]">
            <el-input 
              @focus="showMap" 
              style="width: 100%" 
              v-model="ruleForm.stayAddress"
              placeholder="请选择住宿地址" 
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
              label="地址简称:"
              prop="staySimpleAddress"
              :rules="[{  required: true, message: '请输入地址简称',  trigger: 'change'  }]">
            <el-input style="width: 100%" maxlength="5" show-word-limit v-model="ruleForm.staySimpleAddress"
                      placeholder="地址简称"/>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
              label="地址方向:"
              prop="stayDirection"
              :rules="[ {  required: true, message: '请选择地址方向',  trigger: 'change'  } ]">
            <el-select style="width: 100%" v-model="ruleForm.stayDirection" placeholder="地址方向">
              <el-option label="东" value="东"></el-option>
              <el-option label="南" value="南"></el-option>
              <el-option label="西" value="西"></el-option>
              <el-option label="北" value="北"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="任职部门" prop="deptId" :rules="[ {  required: true, message: '请选择任职部门',  trigger: 'change'  } ]">
            <SelTeamGroup 
              style="width: 100%;"
              :tipText="'请选择任职部门'"
              :deptNames="''" 
              :isMult="false" 
              :isSelAny="true" 
              :defval="ruleForm.deptId" 
              :width="'100%'" 
              @selItem="getSeledTeamGroup">
            </SelTeamGroup>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="岗位角色" prop="roleId" :rules="[ {  required: true, message: '请选择岗位角色',  trigger: 'change'  } ]">
            <el-select
                @change="handleSelect"
                :disabled="!roleOptions.length"
                v-model="ruleForm.roleId"
                filterable
                placeholder="请选择岗位角色"
                style="width: 100%">
              <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="身份证:"
            prop="positive"
            :rules="[ { required: false, message: '请上传身份证(正面)',  trigger: 'change'  } ]">
            <UploadImg
              :src="fileBaseUrl+ruleForm.positive"
              imgName="positive"
              @getImgUrl="setImgUrl"
              :ps="{ userName: uname }"
              url="/company/upload"
              :tiptext="'（正面）'"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="身份证:"
            prop="reverse"
            :rules="[ {  required: false, message: '请上传身份证(反面)',  trigger: 'change'  } ]">
            <UploadImg
              :src="fileBaseUrl+ruleForm.reverse"
              imgName="reverse"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{ userName: uname }"
              :tiptext="'（反面）'"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
              label="有效期:"
              prop="idCardExpire"
              :rules="[ {  required: false, message: '身份证有效期',  trigger: 'change'  } ]">
            <el-date-picker
                style="width: 100%"
                value-format="yyyy-MM-dd"
                class="date"
                v-model="ruleForm.idCardExpire"
                type="date"
                placeholder="选择开始日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <TpAmap
      style="height: 400px;z-index: 99"
      v-if="isShowMap"
      :state="isShowMap"
      @getMdState="getAmapState"
      @getMapData="getMapData"
    />
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getCompanyDict, getFindDepts, getRoleByDeptId} from "@/api/services/common.service";
import TpAmap from "@/views/tpls/tp-amap";
import UploadImg from '@/components/UploadImg';
import SelTeamGroup from '@/components/SelTeamGroup';

export default {
  name: "BaseFrom",
  components: {SelTeamGroup, TpAmap, UploadImg},
  props: ['source'],
  computed: {
    ...mapGetters(["uname"]),
  },
  watch: {
    source(newValue) {
      this.fillData(newValue)
    }
  },
  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,

      isShowMap: false, // 地图显影
      ruleForm: {
        id: '',
        realName: '',
        phone: '',
        idCard: '',
        entryCompany: '',// 入职公司
        staffState: 'NORMAL', // 入职状态
        age: '',
        birthdayTime: '',
        sex: 'MALE', // 性别
        entryTime: '', //入职时间
        expireTime: '', // 合同到期时间
        stayAddress: '', // 住宿地址全称
        stayLatLon: '', // 经纬度
        staySimpleAddress: '', // 住宿地址简称
        stayDirection: '', // 住宿地址方位
        positive: '', // 正面
        reverse: '', // 反面
        idCardUrl: '',
        idCardExpire: '', // 身份证有效期
        deptId: [], //任职部门
        roleId: '', // 岗位角色
      },
      companyOptions: [],
      // departmentOptions: [],
      roleOptions: [],
    }
  },
  created() {
    const that = this;

    // 入职日期（默认今天）
    that.ruleForm.entryTime = that.$moment().format("YYYY-MM-DD");
    // 合同到期日期（默认一年）
    that.ruleForm.expireTime = that.$moment().add(1, 'y').format('YYYY-MM-DD');

    getCompanyDict().then(res => { that.companyOptions = res.data })
    // getFindDepts({page: 1, rows: 9999}).then(res => { that.departmentOptions = res.data })
  },
  methods: {
    async fillData(newValue) {
      for (let attr in this.ruleForm) {
        this.ruleForm[attr] = newValue[attr]
      }
      
      if (newValue.baseUserId && Object.keys(newValue.baseUserId).length !== 0) {
        this.ruleForm.realName = newValue.baseUserId.realName
        this.ruleForm.phone = newValue.baseUserId.phone
      }
      if (newValue.entryCompany) {
        this.ruleForm.entryCompany = newValue.entryCompany.id;
      }

      if (newValue.deptId) {
        this.ruleForm.deptId = [newValue.deptId.id];
        await this.handleChange(newValue.deptId.id);
      }else{
        this.ruleForm.deptId = [];
      }
      if (newValue.roleId) {
        this.ruleForm.roleId = newValue.roleId.id
      }
      if (newValue.idCardUrl) {
        let result = newValue.idCardUrl.split(',')
        if (result && result.length !== 0) {
          this.ruleForm.positive = result[0]
          this.ruleForm.reverse = result[1]
        }
      }
    },
    // 所属部门选择
    getSeledTeamGroup(e){
      this.U.setFmArr(this.ruleForm.deptId, e.val);
      // 获取部门对应角色
      this.handleChange(this.ruleForm.deptId.toString());
    },
    handleSelect(data) {
      let ret = this.roleOptions.find(item => item.id === Number(data))
      this.$emit('change', ret)
    },
    handleChange(id) {
      this.ruleForm.roleId = '';
      getRoleByDeptId({deptId: id}).then(res => {
        this.roleOptions = res.data
      })
    },
    setCurrentData(data) {
      this.ruleForm = {...data}
    },
    getSource() {
      this.ruleForm.idCardUrl = [this.ruleForm.positive, this.ruleForm.reverse].join(',')
      // delete this.ruleForm.positive
      // delete this.ruleForm.reverse
      let ps = this.U.scopy(this.ruleForm);
      ps.deptId = ps.deptId.join(',');
      return ps;
    },
    handleBlur(e) {
      let data = e.target.value
      if(!data) return
      let {age, gender, birthday} = this.U.getIdCardInfo(data, '-')
      this.ruleForm.age = age
      this.ruleForm.birthdayTime = birthday
      this.ruleForm.sex = gender ? 'MALE' : 'FEMALE'
    },
    // 验证
    validate() {
      return new Promise(resolve => {
        this.$refs.baseRef.validate((valid) => {
          resolve(valid)
        })
      })
    },
    resetFields() {
      this.$refs.baseRef.resetFields();
    },
    showMap() {
      this.isShowMap = true;
    },
    getAmapState(e) {
      this.isShowMap = e;
    },
    getMapData(e) {
      if (!e) return;
      const {address, lng, lat} = e;
      this.ruleForm.stayAddress = address
      this.ruleForm.stayLatLon = `${lng},${lat}`;
      this.isShowMap = false;
    },
    setImgUrl(data) {
      // 正面
      if (data.name === 'positive') {
        this.ruleForm.positive = data.url;
      }
      // 反面
      if (data.name === 'reverse') {
        this.ruleForm.reverse = data.url;
      }
    }
  }
}
</script>